<style lang="scss" scoped>
@import '../../css/training.scss';

@import '../../css/exam2.scss';

</style>

<template>
    <section>

        <section class="breadcrumb-box clearfix">
            <el-breadcrumb separator=" > " class="fl">
                <el-breadcrumb-item >培训</el-breadcrumb-item>
                <el-breadcrumb-item :to="{path: '/training/training-manage'}">培训管理</el-breadcrumb-item>
                <el-breadcrumb-item v-if="$route.meta">{{$route.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
        </section>

        <section class="exam-box">

            <section class="train-name pt30">《多麦企业文化培训》考试</section>

            <section class="traniing-info-tab exam-info-tab p-relative">
                <span v-for="item,$index in tabList" :class="{'active': tabIndex ==$index}" @click="tabActive($index)">{{item}}</span>
                <div class="p-absolute exam-info-tabr" :class="step>0?'':'hide'">
                    <span class="mr20" @click="goto('/training/exam-preview')">预览</span>
                    <span class="ml from-bank" @click="questionListFlag = true">+  从题库选题</span>
                </div>
            </section>

            <!-- 没有试卷 -->
            <section v-if="step==0" class="exam-space">
                <span class="exam-space-item space-iconf" @click="step=1">
                    <img src="../../images/Training-ic-paper.png" alt="">
                    <span class="space-txt fs-14 mt">新建空白试卷</span>
                </span>
                <div class="exam-space-item" @click="libListFlag = true">
                    <img src="../../images/Training-ic-Test-paper.png" alt="">
                    <span class="space-txt fs-14 mt">试卷库中选择</span>
                </div>
            </section>

            <!-- 编辑试卷 -->
            <section v-else-if="step==1">
                <el-form ref="exam-form" :model="form" :rules="rules" class="mt30">

                    <!-- 显示头部信息 -->
                    <div :class="{hide:mainEditFlag}">
                        <div class="exam-line mt20">
                            <span>考试名称：{{form.ExamTitle}}</span>
                            <span class="exam-medit" @click="mainEditFlag=true"></span>
                        </div>
                        <div class="exam-line">
                            合格分数：{{form.PassScore}}
                        </div>
                        <div class="exam-line">
                            考试时长：{{form.AllowCostTime}}
                        </div>
                        <div class="exam-line exam-lineedit clearfix">
                            <div class="">{{form.ExamDesc}}</div>
                            <span class="fr"></span>
                        </div>
                    </div>
                    <!-- 编辑头部信息 -->
                    <div :class="{hide: !mainEditFlag}">
                        <el-form-item label="考试名称" prop="ExamTitle">
                            <el-input v-model="form.ExamTitle"></el-input>
                        </el-form-item>
                        <el-form-item label="考试描述" prop="ExamDesc">
                            <el-input v-model="form.ExamDesc"></el-input>
                        </el-form-item>
                        <el-form-item class="">
                            <el-col :span="8">
                                <el-form-item label="合格分数" prop="PassScore" class="">
                                    <el-input v-model.number="form.PassScore" class="examo-inp03"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="考试时长" prop="AllowCostTime">
                                    <el-input v-model.number="form.AllowCostTime" class="examo-inp03"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-form-item>

                        <div :class="{hide:!addFlag}">
                            <el-form-item label="知识体系" prop="InfoCateID">
                                <el-select v-model="form.InfoCateID" placeholder="请选择活动区域">
                                    <el-option :label="one.CateName" :value="one.InfoCateID" v-for="one in InfoCateList" :key="one"></el-option>

                                </el-select>
                            </el-form-item>
                        </div>

                        <div :class="{hide: !hasExamId}">
                            <span class="examo-save" @click="editMainInfo">保存</span>
                        </div>
                    </div>

                    <div class="form-sepa mt20">

                        <!--初始化选择题-->
                        <div class="exam-addbox mt20">
                            <span class="exama-one exama-i0" @click="addOne(2)">单选题</span>
                            <span class="exama-one exama-i1" @click="addOne(1)">多选题</span>
                            <span class="exama-one exama-i2" @click="addOne(3)">问答题</span>
                        </div>

                        <!-- 开始题目循环 -->
                        <template v-for="outer,index in form.Questions">   <!-- QuestionType:1, 多选题  2，单选题 3，问答 -->
                            <!-- 单选题+多选题 -->
                            <!--<section v-if="!outer.editFlag">  &lt;!&ndash; 显示状态 &ndash;&gt;-->
                            <section :class="{hide:outer.editFlag}">  <!-- 显示状态 -->
                                <div class="exam-one clearfix mt20" v-if="outer.QuestionType!=3">
                                    <div class="examo-lef">
                                        <div class="">Q{{index+1}}</div>
                                        <div class="examo-do examo-edit mt" @click="editOne(index)"></div>
                                        <div class="examo-do examo-del" @click="delOne"></div>
                                    </div>
                                    <div class="examo-rig">
                                        <!-- 标题 -->
                                        <div class="examo-tit examo-line  clearfix">
                                            <div class="examo-f01">
                                                <span v-if="outer.QuestionType==1">【多选题】</span>
                                                <span v-else>【单选题】</span>

                                                <span class="">{{outer.QuestionTitle}}</span>
                                            </div>
                                            <div class="examo-f02">
                                                <span>{{outer.RightScore}}</span>
                                                <span>分</span>
                                            </div>
                                        </div>
                                        <!-- 选项 -->
                                        <div class="examo-one examo-line mt20 clearfix" v-for="one,iIndex in outer.Answers">
                                            <div class="examo-f00">
                                                <el-radio v-model.number="outer.RightAnswerIndexs" :label="iIndex" v-if="outer.QuestionType==2" disabled="true">{{answerArr[iIndex]}}</el-radio>
                                                <label v-else disabeld>
                                                    <span class="exam-checkbox" :class="judgeCheckOn(iIndex, outer.RightAnswerIndexs)?'checked':''"></span>
                                                </label>
                                                <span>{{one.AnswerValue}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 问答题 -->
                                <div class="exam-one clearfix mt20" v-else>
                                    <div class="examo-lef">
                                        <div class="">Q{{index+1}}</div>
                                        <div class="examo-do examo-edit mt" @click="editOne(index)"></div>
                                        <div class="examo-do examo-del" @click="delOne(index)"></div>
                                    </div>
                                    <div class="examo-rig">

                                        <div class="examo-one examo-line clearfix">
                                            <div class="examo-f00">
                                                <!--<el-input class="examo-inp00" placeholder="标题"></el-input>-->
                                                {{outer.QuestionTitle}}
                                            </div>
                                            <div class="examo-f01">
                                                <span>【问答题】</span>
                                            </div>
                                            <div class="examo-f02">
                                                <span>{{outer.RightScore}}</span>
                                                <span>分</span>
                                            </div>
                                        </div>
                                        <div class="mt20">
                                            {{outer.Answers[0].AnswerValue}}
                                            <!--<el-input type="textarea" :rows="5" placeholder="请输入问答答案...">
                                            </el-input>-->
                                        </div>
                                    </div>
                                </div>

                            </section>

                            <section :class="{hide:!outer.editFlag}">   <!-- 编辑状态 -->
                                <div class="exam-one clearfix mt20" v-if="outer.QuestionType!=3">
                                    <div class="examo-lef">
                                        <div class="">Q{{index+1}}</div>
                                        <!--<div class="examo-do examo-edit mt"></div>
                                        <div class="examo-do examo-del"></div>-->
                                    </div>
                                    <div class="examo-rig">
                                        <!-- 标题 -->
                                        <div class="examo-tit clearfix">
                                            <div class="examo-f00">
                                                <el-input class="examo-inp00" placeholder="标题" v-model="outer.QuestionTitle"></el-input>
                                            </div>
                                            <div class="examo-f01">
                                                <span v-if="outer.QuestionType==1">【多选题】</span>
                                                <span v-else>【单选题】</span>
                                            </div>
                                            <div class="examo-f02">
                                                <span>分值</span>
                                                <el-input class="examo-inp01" v-model="outer.RightScore"></el-input>
                                                <span>分</span>
                                            </div>
                                        </div>
                                        <!-- 选项 -->
                                        <div class="examo-one mt20 clearfix" v-for="one,iIndex in outer.Answers">
                                            <div class="examo-f00">

                                                <!--<span v-if="outer.QuestionType==2"><el-radio disabled="true"></el-radio></span>
                                                <span v-else><el-checkbox disabled></el-checkbox></span>-->
                                                <el-radio v-model="outer.RightAnswerIndexs" :label="iIndex" v-if="outer.QuestionType==2">{{answerArr[iIndex]}}</el-radio>
                                                <label @click="checkAnswerOne(iIndex, outer.RightAnswerIndexs, index, 3)" v-else>
                                                    <span class="exam-checkbox" :class="judgeCheckOn(iIndex, outer.RightAnswerIndexs)?'checked':''"></span>
                                                    <span>{{answerArr[iIndex]}}</span>
                                                </label>

                                                <!--<span class="mr">{{answerArr[iIndex]}}</span>-->
                                                <el-input class="examo-inp02 ml" placeholder="标题" v-model="one.AnswerValue"></el-input>

                                            </div>
                                            <div class="examo-f01">

                                                <el-radio v-model="outer.RightAnswerIndexs" :label="iIndex" v-if="outer.QuestionType==2">设为答案</el-radio>
                                                <label @click="checkAnswerOne(iIndex, outer.RightAnswerIndexs, index, 3)" v-else>
                                                    <span class="exam-checkbox" :class="judgeCheckOn(iIndex, outer.RightAnswerIndexs)?'checked':''"></span>
                                                    <span>设为答案</span>
                                                </label>

                                                <!--<el-radio label="1">设为答案</el-radio>-->
                                            </div>
                                            <div class="examo-f02">
                                                <span class="examo-do examo-tot"></span>
                                                <span class="examo-do examo-tob"></span>
                                                <span class="examo-do examo-del" @click="delAnswerOne(index,iIndex)"></span>
                                            </div>
                                        </div>
                                        <!-- 添加按钮 -->
                                        <div class="examo-add mt20" @click="addAnswerOne(index)">+添加选项</div>
                                        <div class="examo-save mt20" @click="saveAnswerOne(index, outer.QuestionType)" v-if="outer.editFlag">保存</div>
                                        <div class="examo-cancel mt20 ml" @click="cancelAnswerOne(index)" v-if="cancelOneFlag">取消</div>
                                    </div>
                                </div>
                                <!-- 问答题 -->
                                <div class="exam-one clearfix mt20" v-else>
                                    <div class="examo-lef">
                                        <div class="">Q{{index+1}}</div>
                                        <div></div>
                                        <div></div>
                                    </div>
                                    <div class="examo-rig">

                                        <div class="examo-one clearfix">
                                            <div class="examo-f00">
                                                <el-input class="examo-inp00" placeholder="标题" v-model="outer.QuestionTitle"></el-input>
                                            </div>
                                            <div class="examo-f01">
                                                <span>【问答题】</span>
                                            </div>
                                            <div class="examo-f02">
                                                <span>分值</span>
                                                <el-input class="examo-inp01" v-model="outer.RightScore"></el-input>
                                                <span>分</span>
                                            </div>
                                        </div>
                                        <div class="mt20">
                                            <el-input type="textarea" :rows="5" placeholder="请输入问答答案..." v-model="outer.Answers[0].AnswerValue">
                                            </el-input>
                                        </div>
                                        <div class="examo-save mt20" @click="saveAnswerOne(index, outer.QuestionType)" v-if="outer.editFlag">保存</div>
                                    </div>
                                </div>
                            </section>

                        </template>


                        <!--添加选择题-->
                        <div class="exam-addbox mt20" :class="{hide:!form.Questions.length}">
                            <span class="exama-add mr"></span>
                            <template v-if="addBtnFlag">
                                <span class="exama-one exama-tip" @mouseover="addOver">添加题目</span>
                            </template>
                            <template v-else>
                                <div class="exama-dos" @mouseout="outAddBtn" @mousemove="moveAddBtn">
                                    <span class="exama-one exama-i0" @click="addOne(2,true)">单选题</span>
                                    <span class="exama-one exama-i1" @click="addOne(1,true)">多选题</span>
                                    <span class="exama-one exama-i2" @click="addOne(3,true)">问答题</span>
                                </div>
                            </template>
                        </div>

                    </div>

                    <div class="exama-minor mt20" :class="{hide:!addFlag}">
                        <el-checkbox v-model="form.isJoinExamLib" true-label="1" value="1">将试卷保存到试卷库</el-checkbox>
                        <el-checkbox v-model="form.isJoinQuestionLib" true-label="1" value="1">将试题保存到题库</el-checkbox>
                    </div>

                    <!--<el-form-item>-->
                    <div class="mt20">
                        <el-button type="primary" @click="submitForm('exam-form')">提交</el-button>
                    </div>
                    <!--</el-form-item>-->

                </el-form>

            </section>

            <!-- 方法试卷 -->
            <section v-else-if="step==2">

            </section>

            <!-- 考试结果 -->
            <section v-else-if="step==3">

            </section>

        </section>

        <!--试卷详情查看-->
        <el-dialog
                title="试卷详情"
                :visible.sync="showPaperDetail"
                width="50%"
                center>
            <section class="detail-stu-info fs-14">
                <span class="mt20">姓名：smile</span>
                <span class="mt20">工号：219</span>
                <span class="mt20">公司：219</span>
                <span class="mt20">手机：15637882778</span>
            </section>
            <section class="detail-stu-score fs-14 mt20">
                <div class="p-relative detail-stu-title">
                    <span class="p-absolute exam-space-linet">考试结果</span>
                    <div class="exam-space-line"></div>
                </div>
                <p class="mt20"><span>得分：20分</span><span class="stu-test-status ml20">通过</span></p>
                <p class="mt20">排名：第1名</p>
            </section>
            <section class="mt30">
                <div class="p-relative detail-stu-title">
                    <span class="p-absolute exam-space-linet">问卷</span>
                    <div class="exam-space-line"></div>
                </div>
                <ul>
                    <li class="p-relative mt exam-question ">
                        <div class="question-content mt20">
                            <p class="question-topic">
                                <span>1</span>
                                <span>【单选题】</span>
                                <span>迟到几次不扣工资</span>
                            </p>
                            <ul class="question-options">
                                <el-radio-group v-model="questionRadio">
                                    <li class="mt20 fs-14">
                                        <el-radio label="1" disabled >A<span class="ml20"></span>1次</el-radio>
                                    </li>
                                    <li class="mt20 fs-14">
                                        <el-radio label="2" disabled >B<span class="ml20"></span> 1次</el-radio>
                                    </li>
                                    <li class="mt20 fs-14">
                                        <el-radio label="3" disabled >C<span class="ml20"></span>1次</el-radio>
                                    </li>
                                    <li class="mt20 fs-14">
                                        <el-radio label="4" >D<span class="ml20"></span>1次</el-radio>
                                    </li>
                                </el-radio-group>
                            </ul>
                            <div class="question-down clearfix mt20">
                                <span class="fs-14 question-down-left fl fs-14">学员回答∶B</span>
                                <span class="fr">
                                    <img src="../../images/correct-icon.png" alt="">
                                    <span class="fs-14 question-down-right">（得10分）</span>
                                </span>
                            </div>
                        </div>
                        <div class="p-absolute answers-score">（10分）</div>
                    </li>
                    <li class="p-relative mt exam-question ">
                        <div class="question-content mt20">
                            <p class="question-topic">
                                <span>1</span>
                                <span>【单选题】</span>
                                <span>迟到几次不扣工资</span>
                            </p>
                            <ul class="question-options">
                                <el-radio-group v-model="questionRadio">
                                    <li class="mt20 fs-14">
                                        <el-radio label="1" disabled >A<span class="ml20"></span>1次</el-radio>
                                    </li>
                                    <li class="mt20 fs-14">
                                        <el-radio label="2" disabled >B<span class="ml20"></span> 1次</el-radio>
                                    </li>
                                    <li class="mt20 fs-14">
                                        <el-radio label="3" disabled >C<span class="ml20"></span>1次</el-radio>
                                    </li>
                                    <li class="mt20 fs-14">
                                        <el-radio label="4" >D<span class="ml20"></span>1次</el-radio>
                                    </li>
                                </el-radio-group>
                            </ul>
                            <div class="question-down clearfix mt20">
                                <span class="fs-14 question-down-left fl fs-14">学员回答∶B</span>
                                <span class="fr">
                                    <img src="../../images/correct-icon.png" alt="">
                                    <span class="fs-14 question-down-right">（得10分）</span>
                                </span>
                            </div>
                        </div>
                        <div class="p-absolute answers-score">（10分）</div>
                    </li>
                    <li class="p-relative mt exam-question ">
                        <div class="question-content mt20">
                            <p class="question-topic">
                                <span>1</span>
                                <span>【单选题】</span>
                                <span>迟到几次不扣工资</span>
                            </p>
                            <ul class="question-options">
                                <el-radio-group v-model="questionRadio">
                                    <li class="mt20 fs-14">
                                        <el-radio label="1" disabled >A<span class="ml20"></span>1次</el-radio>
                                    </li>
                                    <li class="mt20 fs-14">
                                        <el-radio label="2" disabled >B<span class="ml20"></span> 1次</el-radio>
                                    </li>
                                    <li class="mt20 fs-14">
                                        <el-radio label="3" disabled >C<span class="ml20"></span>1次</el-radio>
                                    </li>
                                    <li class="mt20 fs-14">
                                        <el-radio label="4" >D<span class="ml20"></span>1次</el-radio>
                                    </li>
                                </el-radio-group>
                            </ul>
                            <div class="question-down clearfix mt20">
                                <span class="fs-14 question-down-left fl fs-14">学员回答∶B</span>
                                <span class="fr">
                                    <img src="../../images/correct-icon.png" alt="">
                                    <span class="fs-14 question-down-right">（得10分）</span>
                                </span>
                            </div>
                        </div>
                        <div class="p-absolute answers-score">（10分）</div>
                    </li>
                </ul>
            </section>


            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showPaperDetail = false">知道了</el-button>
            </span>
        </el-dialog>

        <!--弹窗-从题库选题-->
        <el-dialog
                title="题库选择"
                :visible.sync="questionListFlag"
                width="50%"
                center>
            <section class="signup-total">
                <el-input
                        placeholder="请输入内容"
                        prefix-icon="el-icon-search"
                        v-model="questionKeyword"
                        debounce="200"
                        @change="questionChange"
                        class="sign-input">
                </el-input>
            </section>
            <section class="table-box mt">
                <el-table :data="questionList" height="300" v-loading="questionLoading">
                    <el-table-column property="QuestionTitle" label="题目" style="text-align: center;"></el-table-column>
                    <el-table-column property="QuestionType" label="类型"></el-table-column>
                    <el-table-column property="CateName" label="知识体系"></el-table-column>
                    <el-table-column property="RightScore" label="题分"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="questionApply(scope.row.QID)">应用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </section>
            <section class="mt20">
                <el-pagination @size-change="getQuestionList" @current-change="getQuestionList" :page-size="100" layout="prev, pager, next, jumper" :total="pageQuestionInfo.total">
                </el-pagination>
            </section>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="questionListFlag = false">确定</el-button>
            </span>
        </el-dialog>

        <!--弹窗-从试卷库里选择试卷-->
        <el-dialog title="试卷选择" :visible.sync="libListFlag" width="50%" center>
            <section class="signup-total">
                <el-input
                        placeholder="请输入内容"
                        prefix-icon="el-icon-search"
                        v-model="libKeyword"
                        debounce="200"
                        @change="libChange"
                        class="sign-input">
                </el-input>
            </section>
            <section class="table-box mt">
                <el-table :data="libList" height="240" v-loading="libLoading">
                    <el-table-column property="ExamTitle" label="试卷名称" style="text-align: center;"></el-table-column>
                    <el-table-column property="QuestionNum" label="试卷题目数"></el-table-column>
                    <el-table-column property="CreateTime" label="创建时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="libApply(scope.row.ExamLibID)">应用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </section>
            <section class="mt20">
                <el-pagination
                        @size-change="getLibList"
                        @current-change="getLibList"
                        :page-size="100"
                        layout="prev, pager, next, jumper"
                        :total="pageLibInfo.total">
                </el-pagination>
            </section>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="libListFlag = false">知道了</el-button>
            </span>
        </el-dialog>

        <!-- 删除一道题目 -->
        <el-dialog title="提示" :visible.sync="delOneFlag" width="30%" :before-close="handleClose">
            <span>这是一段信息</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
              </span>
        </el-dialog>

    </section>
</template>

<script>

import qs from 'qs'
import com from 'js/common'
//import editor from '../../components/wangeditor.vue'
let answerArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

export default{
    data: function(){
        return {
            questionLoading: false,
            questionKeyword: '',
            questionList: [],       // 题库列表
            pageQuestionInfo: {
                pageSize: 20,
                total:0,
                page:1
            },

            libLoading: false,
            libKeyword: '',
            libList: [],      //   试卷列表
            pageLibInfo: {
                pageSize: 20,
                total:0,
                page:1
            },

            outTimeId: '',
            answerArr: answerArr,
            tabList:['编辑试卷','发放试卷','考试结果'],
            tabIndex: 0,

            step: 0,      // 编辑试卷步骤， 0, 没有试卷状态 1，编辑试卷  2， 方法试卷   3， 考试结果
            initHasTest: false,      // 是否有试卷

            questionListFlag: false,      // 题库选题弹框
            libListFlag: false,      // 卷库中选择弹框

            mainEditFlag: true,      // 头部编辑状态 - eg：考试名称、分数
            addBtnFlag: true,      // 是否显示添加试题按钮
            editFlag: false,      // 是否编辑当中
            editTip: '题目请编辑完整，才可以开始其他操作哦！',
            cancelOneFlag: false,      // 添加题目时取消添加


            form: {
                ExamID: '',
                Questions: []      // oneEditFlag， 手动添加， 编辑状态
            },
            InfoCateList: [],      // 知识体系


            rules: {
                ExamTitle: [
                    { required: true, message: '请输入考试名称', trigger: 'blur' }
                ],
                ExamDesc: [
                    { required: true, message: '请输入考试描述', trigger: 'blur' }
                ],
                PassScore: [
                    { required: true, message: '请输入合格分数', trigger: 'blur' },
                    { type: 'number', message: '合格分数为数字值'}
                ],
                AllowCostTime: [
                    { required: true, message: '请输入考试时长', trigger: 'blur'},
                    { type: 'number', message: '考试时长为数字值'}
                ],
                InfoCateID: [
                    { required: true, message: '请选择知识体系', trigger: 'change' }
                ]
            },

            hasExamId: false
        }
    },
    computed: {
        /*hasExamId: function(){
            console.log('mdmd')
            if(this.form && this.form.ExamID > 0){
                return true;
            }
            return false;
        },*/
        addFlag: function(){      // 是添加还是编辑
            if(this.form.ExamLibID > 0){
                return false;
            }
            return true;
        }
    },
    mixins: [mixinMethods],
    methods: {
        editMainInfo: function(){      // 编辑头部资料
            axios.post('/com/exam/edit', qs.stringify({
                examTitle: this.form.ExamTitle,
                examDesc: this.form.ExamDesc,
                passScore: this.form.PassScore,
                allowCostTime: this.form.AllowCostTime,
                examID: this.form.ExamID,
                examLibID: this.form.ExamLibID
            })).then( (res)=>{
                var d = res.data;
                if(d.flag == 1){
                    this.mainEditFlag = false;
                }
            } );
            return true;
        },
        tabActive: function(i){
            if(!this.initHasTest){
                this.$message.error(this.editTip);
                this.addBtnFlag = true;
                return ;
            }

            this.tabIndex = i;
            this.step = i;
        },

        questionApply: function(id){   // 问题库应用
            if(this.editFlag){
                this.$message.error(this.editTip)
                return ;
            }

            /*
            this.questionListFlag = false;
            //one.editFlag = false;
            this.form.Questions.push(one);*/

            this.getQuestionOne(id);
        },
        libApply: function(id){   // 试卷库应用
            this.getLibOne(id);
        },
        questionChange: function(){
            this.getQuestionList();
        },
        libChange: function(){
            this.getLibList();
        },
        outAddBtn: function(){
            clearTimeout(this.outTimeId);
            this.outTimeId = setTimeout(()=>{
                this.addBtnFlag = true;
            }, 600);
        },
        moveAddBtn: function(){
            clearTimeout(this.outTimeId);
        },
        addOver: function(){
            this.addBtnFlag = false
        },
        addOne: function(n, type){      // 添加试题  type(boolean)，true,底部添加按钮

            if(this.editFlag){
                this.$message.error(this.editTip)
                return ;
            }

            this.editFlag = true;
            if(type){
                this.cancelOneFlag = true;
                this.addBtnFlag = true;
            }

            var obj;
// RightAnswerIndexs
            if(n==1 || n==2){  // 单选 + 多选
                obj = {QuestionTitle: '', RightScore: '', RightScore: '', RightAnswerIndexs: '',
                    Answers: [
                        {},
                        {}
                    ]
                }
            }else{  // 问答  没有答案-没有分数
                obj = {AnswerValue: '',
                    Answers: [
                        {},
                        {}
                    ]
                }
            }

            if(n == 1){ // 单选
                obj.QuestionType = 1;
                //obj.RightAnswerIndexs = [];
            }else if(n == 2){ // 多选
                obj.QuestionType = 2;
                //obj.RightAnswerIndexs = '';
            }else if(n == 3){ // 问答
                obj.QuestionType = 3;
            }

            obj.editFlag = true;      // 默认编辑状态

            this.form.Questions.push(obj);
        },
        editOne: function(index){
            console.log('ddddd - one');
            console.log(this.editFlag);
            if(this.editFlag){
                this.$message(this.editTip);
                return ;
            }
            console.log(this.editFlag);
            console.log(this.form.Questions[index]);
            console.log(this.form.Questions[index].editFlag);
            this.form.Questions[index].editFlag = true;
        },
        delOne: function(index){
            if(this.editFlag){
                this.$message(this.editTip);
                return ;
            }

            this.$confirm('确认删除？').then(()=>{
                this.form.Questions.splice(index, 1);
            }).catch( ()=>{
                //
            })

        },

        addAnswerOne: function(index){      // 增加小题中的选项
            var one = this.form.Questions[index];
            if(one){
                one.Answers.push({});
            }

        },
        delAnswerOne: function(outerIndex, index){      // 删除小题中的选项
            var one = this.form.Questions[outerIndex];
            if(one){
                one.Answers = Array.prototype.slice.call(one.Answers, 0);
                one.Answers.splice(index, 1);
            }
        },
        saveAnswerOne: function(outerIndex, type){   // 保存一试题     type 1,多选 2,单选 3 问答
            var status = this.judgeOkOne(outerIndex, type),
                    flag = status.flag;

            if(flag){
                this.form.Questions[outerIndex].editFlag = false;
                this.editFlag = false;
                this.cancelOneFlag = false;
            }else{
                this.$message.error(status.msg);
            }
        },
        cancelAnswerOne: function(outerIndex){      // 取消编辑
            this.editFlag = false;
            this.form.Questions.splice(outerIndex, 1);
        },
        judgeOkOne: function(outerIndex, type){     // 判断一试题是否编辑完全

            //return true;

            var one = this.form.Questions[outerIndex],
                    answers = one.Answers,
                    len = answers.length,
                    status = {flag: true, msg: ''};

            if(type == 3){   // 问答
                if(!one.QuestionTitle) return {flag: false, msg: '请输入标题'};
            }else{  // 单选 + 多选
                if(!one.QuestionTitle) return {flag: false, msg: '请输入标题'};
                if(!one.RightScore) return {flag: false, msg: '请输入分数'};
                if(type==1){
                    if(one.RightAnswerIndexs.length==0) return {flag: false, msg: '请选择正确答案'};
                }else if(type==2){
                    if(one.RightAnswerIndexs==='') {
                        return {flag: false, msg: '请选择正确答案'};
                    }
                }
                for(var i= 0; i<len; i++){
                    if(!answers[i].AnswerValue){
                        return {flag: false, msg: '请输入问题描述'};
                    }
                }
            }
            return status;
        },

        /* 多选重置设置 */
        judgeCheckOn: function(index, arr){      // 判断选项多选是否选中
            if(arr.indexOf(index) > -1){
                return true;
            }
            return false;
        },
        checkAnswerOne: function(index, arr, outIndex, limit){     // 操作选中多选按钮   limit, 限制

            var arr = arr ? arr.split(',') : [];
            var pos = arr.indexOf((index).toString());
            if(pos>-1){
                arr.splice(pos, 1);
            }else{
                arr.push(index);
            }
            this.form.Questions[outIndex].RightAnswerIndexs = arr.join(',');
            //console.log(this.form.Questions[outIndex].RightAnswerIndexs);

        },

        submitForm: function(formName){
            if(this.editFlag){
                this.$message.error(this.editTip);
                return ;
            };

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.doAxios();
                } else {
                    return false;
                }
            });
        },
        doAxios: function(){

            var questions = this.form.Questions;
            questions = com.toArray(questions);
            questions.forEach( (one)=>{
                for(var iOne, i=0,len=one.Answers.length; i<len; i++){
                    iOne = one.Answers[i];
                    iOne.AnswerKey = answerArr[i];
                }
            } )
            questions = null;

            axios.post('/com/exam/add', qs.stringify(this.form)).then( (res)=>{
                var d = res.data;
                if(d.flag == 1){  
                    this.form.ExamID = parseInt(d.data.id);
                    this.hasExamId = true;
                    this.mainEditFlag = false;
                    this.editFlag = false;
                    this.initHasTest = true;
                    this.$message.success('上传成功');
                }
            } );
        },

        getLibList: function(){  // 从题库选题
            this.libLoading = true;
            axios.post('/com/exam/getLibList', qs.stringify({
                pagesize:this.pageLibInfo.pageSize,
                page:this.pageLibInfo.page,
                keywords: this.libKeyword
            })).then((res) => {
                var d = res.data;
                this.libLoading = false;
                if(d.flag == 1){
                    this.libList = d.data.Rows;
                    this.pageLibInfo.total=Number(d.data.Total);
                }else {
                    this.$message.error(d.msg)
                }
            })

        },
        getLibOne: function(id){   // 获取试卷详情
            axios.post('/com/exam/getLib', qs.stringify({
                examLibID: id
            })).then( (res)=>{
                var d = res.data;

                this.libListFlag = false;
                this.editFlag = false;

                if(d.flag == 1){
                    d = d.data;
                    d.AllowCostTime = +d.AllowCostTime;
                    d.Questions.forEach(function(one){       // 转number
                        if(one.QuestionType==2){
                            one.RightAnswerIndexs = +one.RightAnswerIndexs;
                        }
                    })
                    //this.editFlag = true;
                    this.form = d;
                    this.form.ExamLibID = id;
                    this.step = 1;     // 编辑状态
                }
            } );
        },
        getQuestionOne: function(id){
            axios.post('/com/exam/getQuestion', qs.stringify({
                QID: id
            })).then( (res)=>{
                var d = res.data;

                this.libListFlag = false;
                this.editFlag = false;

                if(d.flag == 1){
                    d = d.data;
                    this.questionListFlag = false;
                    if(d.QuestionType==2){    // 转number
                        d.RightAnswerIndexs = +d.RightAnswerIndexs;
                    }
                    d.editFlag = false;
                    this.form.Questions.push(d);
                }
            } );
        },
        getQuestionList: function(){  // 获取试卷列表
            this.questionLoading = true;
            axios.post('/com/exam/getLibQuestionList', qs.stringify({
                pagesize:this.pageQuestionInfo.pageSize,
                page: this.pageQuestionInfo.page,
                keywords: this.questionKeyword
            })).then((res) => {
                var d = res.data;
                this.questionLoading = false;
                if(d.flag == 1){
                    this.questionList = d.data.Rows;
                    this.pageQuestionInfo.total=Number(d.data.Total);
                }else {
                    this.$message.error(d.msg)
                }
            })

        }

    },
    mounted: function(){
        var self = this;

        this.getQuestionList();
        this.getLibList();

        setInterval(function(){
            console.log(self.form.ExamID)
        }, 1000)

        /*axios.post('/xxx', qs.stringify({})).then( (res) => {
         var d = res.data;
         if(d.flag == 1){
         }
         } )*/

        axios.post('/com/info-cates/list').then( (res)=>{
            var d = res.data;
            if(d.flag == 1){
                this.InfoCateList = d.data.InfoCateList;
            }
        } );

        //this.addOne(2, true);
        //this.addOne(1, true);
        //this.addOne(3, true);

    }
}


</script>